<!--
 * @Description: 前缀列表的新建
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-11-02 09:01:54
 * @LastEditTime: 2021-11-11 16:22:28
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="page-content">
    <div class="info">
      <h1 class="title">{{dialogTitle}}</h1>
      <el-alert
        title="由于非空的prefix-list列表的末尾都有缺省规则deny all，即未配置为permit的前缀都会被deny，所以如果要deny某些路由，需要注意加配permit all，将其他的路由前缀permit。"
        type="warning"
        style="margin-top:10px"
      ></el-alert>
      <el-form
        ref="form"
        :model="form"
        class="form"
        :rules="rules"
        label-width="120px"
        label-position="right"
      >
        <!-- 前缀名称 -->
        <el-form-item
          label="前缀名称"
          prop="name"
          :rules="[
              {required: true, message: '请检查必填项！', trigger: 'blur'},
                  { pattern: /^[0-9a-zA-Z~!@#$-_%^&*]+$/, message: '格式不正确' ,trigger: 'blur'}
                ]"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.name" placeholder="填写前缀名称"></el-input>
          </el-col>
        </el-form-item>
        <!-- 前缀列表 -->
        <el-form-item label="前缀列表">
          <el-button icon="el-icon-plus" type="text" @click="dialogStatus = true">添加</el-button>
          <el-table border :data="preList" class="ip-table" style="width: 100%" height="300px">
            <!-- 前缀IP -->
            <el-table-column label="前缀IP" align="center" min-width="150" prop="addr"></el-table-column>
            <!-- 动作 -->
            <el-table-column label="动作" align="center" min-width="150" prop="permit">
              <template slot-scope="scope">
                <span>{{scope.row.permit ? 'Permit': 'Deny'}}</span>
              </template>
            </el-table-column>
            <!-- 掩码长度 -->
            <el-table-column label="掩码长度" align="center" min-width="150px" prop="mask"></el-table-column>
            <!-- 掩码长度下限 -->
            <el-table-column label="掩码长度下限" align="center" min-width="150px" prop="gt"></el-table-column>
            <!-- 掩码长度上限 -->
            <el-table-column label="掩码长度上限" align="center" min-width="150px" prop="lt"></el-table-column>
            <!-- 操作 -->
            <el-table-column fixed="right" align="center" label="操作" width="80px">
              <!-- 删除 -->
              <template slot-scope="scope">
                <el-button
                  type="text"
                  style="color: #FA6962"
                  icon="el-icon-delete"
                  class="table-btn"
                  @click="handleDeleteIP(scope)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 90px" @click="cancel">返回</el-button>
          <el-button type="primary" style="width: 90px" @click="submitForm">{{form.id ? '保存': '创建'}}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 弹窗 新建列表 -->
    <el-dialog
      :title="dialogTitle"
      :close-on-click-modal="false"
      width="500px"
      :visible.sync="dialogStatus"
    >
      <el-form ref="preForm" :model="preForm" label-width="120px" label-position="right">
        <!-- 前缀IP -->
        <el-form-item
          label="前缀IP"
          prop="addr"
          :rules="[{ required: true,pattern: /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){6}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^::([\da-fA-F]{1,4}:){0,4}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:):([\da-fA-F]{1,4}:){0,3}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){2}:([\da-fA-F]{1,4}:){0,2}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){3}:([\da-fA-F]{1,4}:){0,1}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){4}:((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){7}[\da-fA-F]{1,4}$|^:((:[\da-fA-F]{1,4}){1,6}|:)$|^[\da-fA-F]{1,4}:((:[\da-fA-F]{1,4}){1,5}|:)$|^([\da-fA-F]{1,4}:){2}((:[\da-fA-F]{1,4}){1,4}|:)$|^([\da-fA-F]{1,4}:){3}((:[\da-fA-F]{1,4}){1,3}|:)$|^([\da-fA-F]{1,4}:){4}((:[\da-fA-F]{1,4}){1,2}|:)$|^([\da-fA-F]{1,4}:){5}:([\da-fA-F]{1,4})?$|^([\da-fA-F]{1,4}:){6}:$/, message: 'IPv4 or IPv6' ,trigger: 'blur'}]"
        >
          <el-input v-model="preForm.addr" placeholder="填写前缀IP"></el-input>
        </el-form-item>
        <!-- 动作 -->
        <el-form-item
          label="Permit"
          prop="mask"
          :rules="{required: true,message: '请检查必填项！', trigger: 'change'}"
        >
          <el-select v-model="preForm.permit" style="width:100%;">
            <el-option :value="true" label="Permit"></el-option>
            <el-option :value="false" label="Deny"></el-option>
          </el-select>
        </el-form-item>
        <!-- 掩码长度 -->
        <el-form-item label="掩码长度" prop="mask" :rules="{validator: validMask, trigger: 'change'}">
          <el-input-number :min="0" :max="32" v-model="preForm.mask" placeholder="范围：0-32"></el-input-number>
        </el-form-item>
        <!-- 掩码长度下限 -->
        <el-form-item label="掩码长度下限" prop="gt" :rules="{validator: validGt, trigger: change}">
          <el-input-number :min="0" :max="32" v-model="preForm.gt" placeholder="范围：0-32"></el-input-number>
        </el-form-item>
        <!-- 掩码长度上限 -->
        <el-form-item label="掩码长度上限" prop="lt" :rules="{validator: validLt, trigger: change}">
          <el-input-number :min="0" :max="32" v-model="preForm.lt" placeholder="范围：0-32"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelPre">取消</el-button>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['ne', 'type'],
  data () {
    return {
      dialogTitle: '新建前缀列表',
      form: {
        id: null,
        name: null
      },
      preForm: {
        id: null,
        addr: null,
        mask: null,
        lt: null,
        gt: null,
        permit: true
      },
      rules: {},
      preList: [],
      dialogStatus: false
    };
  },
  watch: {},
  methods: {
    // 验证掩码长度
    validMask (rule, value, cb) {
      let _this = this;
      if (value === '' || value === null || value === 'undefined') {
        return cb(new Error('格式不正确'));
      } else {
        if (_this.preForm.lt > 0 && _this.preForm.gt > 0) {
          if (value > _this.preForm.lt || value > _this.preForm.gt) {
            return cb(new Error('掩码长度不大于上、下限'));
          } else {
            return cb();
          }
        } else {
          return cb();
        }

      }
    },
    // 验证掩码长度上限
    validLt (rule, value, cb) {
      let _this = this;
      if (value === '' || value === null || value === 'undefined') {
        return cb(new Error('格式不正确'));
      } else {
        if (_this.preForm.mask > 0 && _this.preForm.gt > 0) {
          if (value < _this.preForm.mask || value < _this.preForm.gt) {
            return cb(new Error('掩码长度不大于下限、下限不大于上限'));
          } else {
            return cb();
          }
        } else {
          return cb();
        }
      }
    },
    // 验证掩码长度下限
    validGt (rule, value, cb) {
      let _this = this;
      if (value === '' || value === null || value === 'undefined') {
        return cb(new Error('格式不正确'));
      } else {
        if (_this.preForm.mask > 0 && _this.preForm.lt > 0) {
          if (value < _this.preForm.mask || value > _this.preForm.lt) {
            return cb(new Error('掩码长度、下限均不大于上限'));
          } else {
            return cb();
          }
        } else {
          return cb();
        }
      }
    },
    // 取消弹窗
    cancelPre () {
      let _this = this;
      _this.$refs['preForm'].resetFields();
      _this.clearData();
      _this.dialogStatus = false;
    },
    // 清空数据
    clearData () {
      let _this = this;
      _this.preForm = {
        mask: null,
        addr: null,
        lt: null,
        gt: null
      };
    },
    // 确认弹窗
    onSubmit () {
      let _this = this;
      _this.$refs['preForm'].validate(valid => {
        if (valid) {
          _this.preList.push({
            addr: _this.preForm.addr,
            mask: _this.preForm.mask,
            lt: _this.preForm.lt,
            gt: _this.preForm.gt,
            permit: _this.preForm.permit
          });
          _this.dialogStatus = false;
          _this.clearData();
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    },
    // 删除列表
    handleDeleteIP (scope) {
      let _this = this;
      _this.preList.splice(scope.$index, 1);
    },
    // 取消创建
    cancel () {
      let _this = this;
      _this.form = {
        id: null,
        name: null
      };
      _this.preList = [];
      _this.$emit('handleDiag', 0);
    },
    // 提交，请求后台服务
    submitForm () {
      let _this = this;
      _this.$refs['form'].validate((valid) => {
        if (valid) {
          let params = {
            neId: _this.ne.id,
            siteId: _this.ne.extAttrs.siteId,
            dgId: _this.ne.dgId,
            name: _this.form.name,
            items: []
          };
          if (_this.preList.length === 0) {
            _this.$message.error('请至少添加一个前缀列表');
            return;
          }
          for (let i = 0; i < _this.preList.length; i++) {
            params.items.push({
              addr: _this.preList[i].addr + '/' + _this.preList[i].mask,
              gt: _this.preList[i].gt,
              lt: _this.preList[i].lt,
              permit: _this.preList[i].permit
            });
          }
          _this.$http.post({
            url: '/api/sdwan/prefixlist/create',
            data: params
          }).then(res => {
            let { status } = res;
            if (status === '0') {
              _this.$message.success('创建成功！');
              _this.cancel();
              _this.$parent.refresh();
            }
          });
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;
  .info {
    background: #fff;

    .title {
      font-size: 22px;
      font-weight: 500;
      padding: 15px 40px;
      border-bottom: 1px solid #eee;
    }

    .form {
      padding: 30px 0px;
      box-sizing: border-box;
    }
  }
  ::v-deep .el-input-number {
    width: 235px;
  }
  .table-btn {
    padding: 0;
  }
}
@media only screen and (max-width: $device-ipad) {
  .page-content {
    ::v-deep .el-input-number {
      width: 195px;
    }
  }
}
</style>
